<script>
import { defaultNumber } from '@/utils';
import cloneDeep from 'lodash/cloneDeep'
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'real-time-data-viewing',
  mixins: [MixinVchartTheme],
  props: {
    showIcon: {
      type: Boolean,
      default: true,
    },
    showSecondaryTitle: {
      type: Boolean,
      default: true,
    },
    height: String,
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      cloneData: cloneDeep(this.data),
      seriesData: [],
    }
  },
  computed: {
    title() {
      return this.cloneData.name || '';
    },
    styleObj() {
      return {
        width: '100%',
        height: this.height || '280px'
      }
    },
    unit() {
      return this.cloneData.series && this.cloneData.series[0]
        ? this.cloneData.series[0].unit || ''
        : '';
    },
    serie() {
      return this.cloneData.series && this.cloneData.series[0]
        ? this.cloneData.series[0].data || []
        : [];
    },
    chartOption() {
      const vm = this;
      return {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0];
            const date = new Date(params.name);
            return (
              date.getFullYear() +
              '/' +
              (date.getMonth() + 1) +
              '/' +
              date.getDate() +
              ' : ' +
              defaultNumber(params.value[1]) + ' ' + (vm.unit || '')
            );
          },
          axisPointer: {
            type: 'cross',
          },
        },
        yAxis: {
          type: 'value',
          name: this.unit,
          animation: false,
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(28,70,94,0.4)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28,70,94,0.4)'
            }
          },
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28,70,94,0.8)'
            }
          },
          animation: false,
        },
        series: [
          {
            animation: false,
            type: 'line',
            symbol: 'circle',
            smooth: true,
            symbolSize: 10,
            showSymbol: false,
            itemStyle: {
              color: '#08a1a3'
            },
            lineStyle: {
              color: '#08a1a3'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1, color: 'rgba(8,161,163,0.1)'
                }, {
                  offset: 0, color: '#08a1a3'
                }],
              },
            },
            data: this.seriesData.slice(0, 300)
          }
        ]
      }
    },
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        this.cloneData = cloneDeep(val);
        this.initSeriesData();
      }
    },
  },
  mounted() {
    this.count = 0;
    this.timer = setInterval(() => {
      this.start()
    }, 1e3)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    initSeriesData() {
      this.seriesData = (this.cloneData.xaxis ? (this.cloneData.xaxis.data || []) : []).map((item, index) => ({
        name: new Date(item).toString(),
        // name: this.$dayjs(item).format('YYYY/MM/DD'),
        value: [
          this.$dayjs(item).format('YYYY/MM/DD'),
          this.cloneData.series ? this.cloneData.series[0].data[index] || null : null,
        ]
      }));
    },
    start() {
      const data = this.seriesData;
      const length = data.length;
      if (this.count > 66) {
        this.count = 0;
        this.initSeriesData();
      }
      if (length > 300) {
        try {
          const target = this.seriesData.shift();
          this.count++;
          // console.log(target.name);
          this.$nextTick(() => {
            this.seriesData.push(target);
          })
        } catch (e) {
          console.warn(e);
        }
      }
    },
  },
}
</script>

<template>
  <div class="content-block">
    <div class="info-head flex align-center">
      {{ title }}
    </div>
    <div class="info-content">
      <v-chart
        :init-options="{ locale: 'zh' }" :option="chartOption"
        :style="{ width: '100%', height: height }"
        :theme="chartTheme" autoresize
      ></v-chart>
    </div>
  </div>
</template>
